<template>
    <div>
        <span>{{ state.flagAreaName }}</span>
    </div>
</template>

<script lang="ts" setup>
    import {reactive, onMounted, watch} from "vue";

    const props = defineProps({
        flagArea: {
            type: String,
            default: ''
        }
    });

    const state = reactive({
        value: "",
        thousands: true,
        suffix: "",
        flagArea: '',
        flagAreaObj: [
            // {name: '未来城全域', code: '1'},
            // {name: '东区', code: '2'},
            // {name: '“能源谷”核心区', code: '21'},
            // {name: '西区', code: '3'},
            // {name: '沙河高教园', code: '31'},
            // {name: '生命科学园', code: '32'},
            // {name: '生态绿心', code: '4'},
        ],
        flagAreaName: ''
    });

    const init = (): void => {
        state.flagArea = props.flagArea;
        state.flagAreaObj.forEach((item: any) => {
            if (item.code == state.flagArea) {
                state.flagAreaName = item.name;
            }
        })
    };
    watch(
        () => props.flagArea,
        (n, o) => {
            init();
        }
    );
    onMounted(() => {
        init();
    });
</script>
